<template>
	<view class="content">
		<view class="top" :style="{'background':backgroundcolor}">
			<view class="topimage">
				<image style="width: 100vw;" mode="scaleToFill" :src="topimageurl"></image>
				</image>
			</view>
			<uni-nav-bar class="bar" color="#333333" :background-color=backgroundcolor
				@clickLeft="home" @clickRight="confirm">
				<block slot="left">
					<view class="home">
						<view><text style="font-size: 26rpx">表情</text></view>
						<uni-icons type="arrowdown" color="grey" size="16" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
					<input v-model="searchvalue" confirm-type="search" class="nav-bar-input" type="text"
						placeholder="输入搜索关键词" @confirm="confirm">
				</view>
				<view style="font-size: 26rpx;" slot="right">
					搜索
				</view>
			</uni-nav-bar>
		</view>
		<view class="middle">
		
		</view>
		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		<view class="bottom" >
			<uni-nav-bar @clickRight="more('hot')">
			    <view  style="font-size: 26rpx;" slot="left"><image style="zoom: 0.08;" src="../../static/hot.png"></image>热门</view>
			    <view style="font-size: 26rpx;" slot="right">更多></view>
			</uni-nav-bar>
			<view class="display">
				<view class="image" v-if="index < 12" v-for="(n,index) in images">
					<image ref="background" mode="aspectFit"
						@click="clickimage(dns+n.imageurl,n.detail)"
						v-bind:src="dns+n.imageurl" show-menu-by-longpress="true"></image>
				</view>
				<!-- <uni-load-more :status="more"></uni-load-more> -->
			</view>
			<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		<uni-nav-bar @clickRight="more('douyin')">
		    <view  style="font-size: 26rpx;" slot="left"><image style="zoom: 0.08;" src="../../static/hot.png"></image>抖音</view>
		    <view style="font-size: 26rpx;" slot="right">更多></view>
		</uni-nav-bar>
			<view class="display">
						<view v-if="dns!=''" class="image" v-for="index of 12">
							<image lazy-load="true" ref="background" mode="aspectFit"
								@click="clickimage(dns+'douyin/douyin%20('+(index+1)+').jpg',' ')"
								
								v-bind:src="dns+'douyin/douyin%20('+(index+1)+').jpg'" show-menu-by-longpress="true"></image>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</view>
		</view>
		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		<uni-nav-bar>
		    <view  style="font-size: 26rpx;" slot="left"><image style="zoom: 0.08;" src="../../static/hot.png"></image>最新</view>
		    <!-- <view style="font-size: 26rpx;" slot="right">更多></view> -->
		</uni-nav-bar>
		<view class="display">
			<view class="image" v-if="images&&index > 12" v-for="(n,index) in images">
				<image lazy-load="true" ref="background" mode="aspectFit"
					@click="clickimage(dns+n.imageurl,n.detail)"
					v-bind:src="dns+n.imageurl" show-menu-by-longpress="true"></image>
			</view>	
		</view>
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :duration="2000" :message="message"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [],
				headurl: "https://images.weserv.nl/?url=",
				searchvalue: '',
				message: "",
				backgroundcolor:'#fbbd08',
				topimageurl:"../../static/chicken.jpg",
				topimages:[
				"../../static/dog.gif",
				"../../static/chicken.jpg",
				"../../static/se.gif",
				"../../static/dog.gif",
				"../../static/dog.gif",
				"../../static/chicken.jpg",
				"../../static/smile-cry.gif",
				"../../static/chicken.jpg",
				"../../static/chicken.jpg",
				],
				dns:'',
				pydns:'',
				springboot:''
			}
		},
		onLoad() {
			var that = this
			that.dns=that.$dns
			that.pydns=that.$pydns
			that.springboot=that.$springboot
			var rand = Math.floor(Math.random()*that.topimages.length);
			that.topimageurl = that.topimages[rand];
			// that.topimageurl="http:\/\/expression.hhll.xyz\/topimage\/child1.jpg"
			// uni.request({
			// 	url:'http://api.hhll.xyz/getaveragecolor',
			// 	data:{
			// 		'imageurl':that.topimageurl
			// 	},
			// 	success(res) {
			// 		that.backgroundcolor=res.data
			// 			wx.setNavigationBarColor({
			// 			frontColor:"#000000",
			// 			backgroundColor: that.backgroundcolor,
			// 			})
			// 	}
			// })
			
			uni.request({
				url: that.springboot+'admin/queryallhot',
				success(res) {
					that.images = res.data
				}
			})
			this.message = "长按图片可以直接发送给朋友哦"
			this.$refs.popup.open('top')
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			var that = this
		},
		methods: {
			getImage(url) {
				if (url !== undefined) {
					return url.replace(/^(http)[s]*(\:\/\/)/, 'https://images.weserv.nl/?url=');
				}
			},
			imageError: function(index) {
				console.log(index)
				// this.$set("https://images.weserv.nl/?url="+this.images[index], this.src);
			},
			moreexpression: function() {
				wx.showToast({
					title: "asd"
				})
			},
			longpressimage: function(imageurl) {
				wx.downloadFile({
					url: imageurl,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			},
			clickimage: function(imageurl, detail) {
				uni.navigateTo({
					url: '../detail/detail?imageurl=' + imageurl + '&detail=' + detail
				});
			},
			confirm: function() {
				if (this.searchvalue == '') {
					this.message = "请先输入点什么吧"
					this.$refs.popup.open('top')
					return
				}
				uni.navigateTo({
					url: '../searchexpression/searchexpression?searchvalue=' + this.searchvalue
				});

			},
			home: function() {

			},
			more:function(category){
				uni.navigateTo({
					url:'../more/more?category='+category
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		width: 100vw;
		flex-direction: column;
	}

	.top {
		width: 100vw;
		/* background-color: #fbbd08; */
	}

	.display {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.image {
		width: 25%;
		zoom: 0.3;
		border-radius: 10px;
		overflow: hidden;
	}

	.search {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.searchinput {
		width: 80vw;
	}
	.bottom{
		display: flex;
		flex-direction: column;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 28px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 6px 0;
		line-height: 30px;
	}

	.nav-bar-input {
		height: 28px;
		line-height: 28px;
		width: 370rpx;
		padding: 0 5px;
		font-size: 13px;
		background-color: #f8f8f8;
	}

	.home {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 4px;
	}
/* 	.daohang{
		display: flex;
		height: 80rpx;
		flex-direction: row;
		flex-wrap: nowrap;
		border-bottom: #333333 solid 1px;
		line-height:80rpx;
		width: 100vw;
		background-color: #FFFFFF;
		}
	.daohangright{
		float: right;
		right: 0;
	} */
</style>
